<template>
  <main>
    <ul>
      <li v-for="todo in data" :key="todo.id">
        <input v-model="todo.done" type="checkbox" />
        <span>{{ todo.title }}</span>
        <a href="javascript:;" @click="removeTodo(todo.id)">删除</a>
      </li>
    </ul>
  </main>
</template>

<script lang="ts">
import type { ITodo } from "@/add.types";
export default {
  name: "TodoList",

  props: {
    //定义data并声明类型
    data: [] as ITodo[],
  },

  setup(props, context) {
    const removeTodo = (id: number) => {
      // console.log("remove", id);
      context.emit("remove", id);
    };
    return {
      removeTodo,
    };
  },
};
</script>

<style scoped>
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

li {
  margin: 10px 0;
  display: flex;
}

li input {
  margin-right: 10px;
}

li span {
  flex: 1;
}
</style>
